<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="SyntaxHighlighter.css" rel="stylesheet" type="text/css" />
<style type="text/css"><!--
p.MsoNormal {margin:0cm;
margin-bottom:.0001pt;
text-autospace:none;
font-size:10.0pt;
font-family:Arial;}
.style1 {color: #FF0000}
-->
</style>
<style type="text/css">
<!--
table.MsoNormalTable {
font-size:10.0pt;
font-family:"Times New Roman";
}
-->
</style>
</head>

<body>
<p class="MsoNormal" style="background:white;"><span class="MsoNormal" style="background:white;"><img src="saibamais.jpg" width="270" height="50" alt="Saiba Mais" /></span></p>
<p class="MsoNormal" style="background:white;"></p>
<p class="MsoNormal" style="margin-right:1.2pt;background:white;"><strong><span style="font-size:12.0pt; ">Ponto de verifica</span></strong><strong><span style="font-size:12.0pt; ">&ccedil;&atilde;</span></strong><strong><span style="font-size:12.0pt; ">o 12.3</span></strong></p>
<p class="MsoNormal" style="margin-top:0cm;margin-right:49.9pt;margin-bottom:.0001pt;margin-left:28.3pt;line-height:12.0pt;background:white;"><span style="font-size:12.0pt; ">Dividir grandes blocos  de informa</span><span style="font-size:12.0pt; ">&ccedil;&atilde;</span><span style="font-size:12.0pt; ">o em grupos mais f</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">ceis  de gerenciar, sempre que for o caso.</span></p>
<p class="MsoNormal" style="margin-top:9.85pt;margin-right:6.0pt;margin-bottom:.0001pt;margin-left:0cm;text-align:justify;line-height:12.0pt;background:white;"><span style="letter-spacing:-.15pt; font-size:12.0pt; ">Por exemplo, em HTML, use OPTGROUP para agrupar os  elementos OPTION dentro de um </span><span style="letter-spacing:-.2pt; font-size:12.0pt; ">elemento de lista SELECT; agrupe os controles de formul</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rio com  FIELDSET e LEGEND; use </span><span style="letter-spacing:-.05pt; font-size:12.0pt; ">listas sempre que seja apropriado; use cabe</span><span style="font-size:12.0pt; ">&ccedil;</span><span style="font-size:12.0pt; ">alhos para  estruturar documentos, etc.</span></p>
<p class="MsoNormal" style="margin-top:9.85pt;margin-right:10.3pt;margin-bottom:.0001pt;margin-left:0cm;text-align:justify;line-height:12.0pt;background:white;"><span style="font-size:12.0pt; ">Uma lista do tipo FORM SELECT com sete elementos ter</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; "> o  seguinte aspecto (i.e, uma lista </span><span style="font-size:12.0pt; ">desestruturada,  simples).</span></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&lt;select  name=&quot;prato&quot;&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;optgroup label=&quot;Segunda-Feira&quot;&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option  value=&quot;1&quot;&gt;Couve Mineira&lt;/option&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option  value=&quot;2&quot;&gt;Carne Assada&lt;/option&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/optgroup&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;optgroup  label=&quot;Ter&ccedil;a-Feira&quot;&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option  value=&quot;3&quot;&gt;Rabada&lt;/option&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option  value=&quot;4&quot;&gt;Macarr&atilde;o&lt;/option&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/optgroup&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;optgroup label=&quot;Quarta-Feira&quot;&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option  value=&quot;5&quot;&gt;Galeto&lt;/option&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/optgroup&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;optgroup  label=&quot;Quinta-Feira&quot;&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option  value=&quot;6&quot;&gt;Sopa de Letrinhas&lt;/option&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/optgroup&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;optgroup  label=&quot;Sexta-Feira&quot;&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option  value=&quot;7&quot;&gt;Feijoada&lt;/option&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/optgroup&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; ">&lt;/select&gt;</span></strong></p>
<p class="MsoNormal" style="background:white;"><strong><span style="font-family:'Courier New'; font-size:12.0pt; ">&nbsp;</span></strong></p>
<p class="MsoNormal" style="background:white;"><span style="font-size:12.0pt; ">O  exemplo ficar</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; "> assim nos navegadores que suportem este comando:</span></p>
<p class="MsoNormal" style="margin-top:11.5pt;margin-right:160.55pt;margin-bottom:.0001pt;margin-left:161.3pt;"><img width="193" height="193" src="12.2_clip_image002.gif" /><span style="font-size:12.0pt; "> </span></p>
<p class="MsoNormal" style="margin-top:36.0pt;background:white;"><span style="font-size:12.0pt; ">Agrupar controles de formul</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rio usando os elementos <strong>FIELDSET </strong>e <strong>LEGEND</strong>.</span></p>
<p class="MsoNormal" style="margin-top:9.35pt;line-height:12.0pt;background:white;"><span style="letter-spacing:-.1pt; font-size:12.0pt; ">O  elemento FIELDSET </span><span style="font-size:12.0pt; ">&eacute;</span><span style="font-size:12.0pt; "> utilizado para agrupar controles de formul</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rio  relacionados de </span><span style="font-size:12.0pt; ">maneira  l</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">gica. Um navegador gr</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">fico deve sublinhar esta rela</span><span style="font-size:12.0pt; ">&ccedil;&atilde;</span><span style="font-size:12.0pt; ">o atrav</span><span style="font-size:12.0pt; ">&eacute;</span><span style="font-size:12.0pt; ">s do  desenho de </span><span style="font-size:12.0pt; ">uma borda  em volta dos elementos relacionados. Os dispositivos de apoio futuros ou  agentes </span><span style="font-size:12.0pt; ">devem  ajudar o usu</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rio, fornecendo sentido a formul</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rios complexos atrav</span><span style="font-size:12.0pt; ">&eacute;</span><span style="font-size:12.0pt; ">s de  navega</span><span style="font-size:12.0pt; ">&ccedil;&atilde;</span><span style="font-size:12.0pt; ">o </span><span style="font-size:12.0pt; ">apropriada dentro do grupo ou  grupos.</span></p>
<strong><span style="font-family:Arial; font-size:12.0pt; "><br clear="all" style="page-break-before:always;" />
</span></strong>
<p class="MsoNormal" style="margin-left:1.45pt;background:white;"><strong><span style="font-size:12.0pt; ">&nbsp;</span></strong></p>
<p class="MsoNormal" style="margin-left:1.45pt;background:white;">&nbsp;</p>
<p class="MsoNormal" style="margin-left:1.45pt;background:white;"><span style="font-size:12.0pt; ">Ao associar uma LEGEND significante  para cada grupo FIELDSET, o autor fornece uma legenda que explica o prop</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">sito ou  natureza dos agrupamentos. Os softwares do usu</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rio que suportem o LEGEND ser</span><span style="font-size:12.0pt; ">&atilde;</span><span style="font-size:12.0pt; ">o capazes de  tornar essa informa</span><span style="font-size:12.0pt; ">&ccedil;&atilde;</span><span style="font-size:12.0pt; ">o dispon</span><span style="font-size:12.0pt; ">&iacute;</span><span style="font-size:12.0pt; ">vel para </span><span style="font-size:12.0pt; ">quem deseja. Alguns navegadores atuais mostram a legenda como texto </span><span style="font-size:12.0pt; ">circunscrito por uma borda.</span></p>
<p class="MsoNormal" style="margin-top:11.3pt;margin-right:0cm;margin-bottom:.0001pt;margin-left:.25pt;line-height:9.85pt;background:white;"><strong><span style="letter-spacing:-.25pt; font-family:'Courier New'; font-size:9.0pt; ">&lt;fieldset&gt;</span></strong><span style="font-size:9.0pt; "> </span></p>
<p class="MsoNormal" style="margin-top:0cm;margin-right:249.6pt;margin-bottom:.0001pt;margin-left:11.75pt;line-height:9.85pt;background:white;"><strong><span style="letter-spacing:-.35pt; font-family:'Courier New'; font-size:9.0pt; ">&lt;legend&gt;  Select your options &lt;/legend&gt; </span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&lt;fieldset&gt;</span></strong><span style="font-size:9.0pt; "> </span></p>
<p class="MsoNormal" style="margin-left:29.05pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&lt;legend&gt;Engine/Powertrain  packages &lt;/legend&gt;&lt;br /&gt;</span></strong><span style="font-size:9.0pt; "> </span></p>
<p class="MsoNormal" style="margin-top:0cm;margin-right:24.95pt;margin-bottom:.0001pt;margin-left:29.05pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&lt;input  type=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">radio</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; "> name=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">power</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; "> value=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">4cyl</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; "> tabindex=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">4</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&gt; 4 cylinder&lt;br /&gt; &lt;input type=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">radio</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; "> name=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">power</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; "> value=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">6cyl</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&gt; 6 cylinder&lt;br /&gt; &lt;input type=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">radio</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; "> name=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">power</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; "> value=</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">6awd</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&gt; 6 cylinder, all wheel drive </span></strong><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&lt;/fieldset&gt; </span></strong></p>
<p class="MsoNormal" style="margin-right:24.95pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; font-size:9.0pt; ">&lt;/fieldset&gt;</span></strong><span style="font-size:9.0pt; "> </span></p>
<p class="MsoNormal" style="margin-top:7.9pt;background:white;"><span style="font-size:12.0pt; ">Veja como esse c</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">digo  fica no navegador</span></p>
<span style="font-family:Arial; font-size:12.0pt; "><img width="270" height="152" src="12.2_clip_image004.jpg" /></span>
<p class="MsoNormal" style="margin-top:48.0pt;background:white;">&nbsp;</p>
</body>
</html>
